<!-- 老仙-御风 -->
<template>
  <div class="content">
    <div v-if="showRes">
      <p>{{ isSuccess ? "成功" : "失败" }}</p>
      <p><van-icon name="star" v-for="item in stars" :key="item" /></p>
    </div>
    <van-button type="default" @click="play">第 {{ level }} 关</van-button>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const isSuccess = ref<boolean>(false);
const stars = ref<number>(0);
const showRes = ref<boolean>(false);
const level = ref<number>(1);

const play = (): void => {
  // 成功概率60%
  isSuccess.value = Math.random() < 0.6 ? true : false;
  levelAdd(isSuccess.value);
  //星星概率: 1-2关：0-10% 1-40% 2-50% ；3关：0-10% 1-30% 2-50% 3-10%
  let random = Math.random();
  if (level.value < 3) {
    if (random < 0.1) {
      stars.value = 0;
    } else if (random < 0.5) {
      stars.value = 1;
    } else stars.value = 2;
  } else {
    if (random < 0.1) {
      stars.value = 0;
    } else if (random < 0.4) {
      stars.value = 1;
    } else if (random < 0.9) {
      stars.value = 2;
    } else {
      stars.value = 3;
    }
  }

  showRes.value = true;
};

const levelAdd = (isSuccess: boolean) => {
  if (isSuccess) {
    if (level.value < 3) {
      level.value++;
    }
  } else {
    if (level.value > 1) {
      level.value = 1;
    }
  }
};
</script>

<style scoped lang="scss">
.content {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  p {
    text-align: center;
  }
  .van-button {
    margin-bottom: 20rem;
    background-color: #232323;
    color: #fff;
  }
  .van-icon-star {
    color: #b69861;
    font-size: 60rem;
    margin-right: 10rem;
  }
}
</style>
